<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>考勤页</h2>
      <el-card>
        <div>部门</div>
        <template>
          <el-checkbox-group v-model="deptsList">
            <el-checkbox v-for="item in depts" :key="item" :label="item" @change="changedepts">{{ item }}</el-checkbox>
          </el-checkbox-group>
        </template>
        <div>考勤</div>
        <el-checkbox-group v-model="radiolist">
          <el-checkbox v-for="item in radios" :key="item" :label="item" @change="changeradio">{{ item }}</el-checkbox>
        </el-checkbox-group>
      </el-card>
      <el-card>
        <el-table border :data="list">
          <el-table-column type="index" label="序号" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="手机" prop="mobile" />
          <el-table-column v-for="(day,index) in dateList" :key="day" :label="day">
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | getstates }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="filteredList.length"
          :page-size="page.pagesize"
          @current-change="currentChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getMockAttendances } from '@/api/attendances'
import attendanceEnum from '@/api/constant/attendance'
// import Cookie from 'js-cookie'
export default {
  filters: {
    getstates(oldval) {
      const obj = attendanceEnum.holidayType.find(item => Number(item.id) === Number(oldval))
      return obj ? obj.value : '未知形式'
    }
  },
  data() {
    return {
      filteredList: [],
      depts: [], // 全部部门
      deptsList: [], // 已勾选部门
      newfilteredList: [], // 转载数据的s
      radiolist: [], // 单选已选中的
      radios: [],
      newradios: [],
      getenumerate: [], // 字符串转数字
      // filternewdate:[],
      page: {
        page: 1,
        pagesize: 5
      }
    }
  },

  computed: {
    dateList() {
      const attendlist = this.list[0] ? this.list[0].attendanceRecord : []
      return attendlist.map(el => {
        // console.log(el.day)
        const mouth = el.day.toString().substring(4, 6)
        const day = el.day.toString().substring(6)
        return `${mouth}/${day}`
      })
    },
    // 分页计算处理
    list() {
      const end = this.page.page * this.page.pagesize
      const start = end - this.page.pagesize
      return this.filteredList.slice(start, end)
    }
  },
  created() {
    this.getMockAttendances()
    this.getradios()
  },
  methods: {
    async getMockAttendances() {
      const { rows } = await getMockAttendances()
      // console.log(rows)
      this.filteredList = rows
      this.newfilteredList = rows
      if (this.depts.length <= 0) {
        rows.forEach(item => {
          if (!this.depts.includes(item.departmentName)) {
            this.depts.push(item.departmentName)
          }
        })
      }
    },
    // 点击分页
    currentChange(newpage) {
      this.page = {
        ...this.page,
        page: newpage
      }
    },
    // 点击多选框
    changedepts() {
      // console.log(2222222)
      if (this.deptsList.length) {
        this.filteredList = []
        this.newfilteredList.forEach(item => {
          this.deptsList.forEach(item2 => {
            if (item.departmentName === item2) {
              this.filteredList.push(item)
            }
          })
        })
      } else {
        this.getMockAttendances()
      }
    },

    // 点击单选
    changeradio() {
      this.getenumerateFn()
      console.log(this.filteredList)
      //   attendanceRecord         adtStatu
      this.filteredList.forEach(item => {
        item.attendanceRecord.forEach(item2 => {
          // console.log(item2.adtStatu)
          this.getenumerate.forEach(item3 => {
            if (item2.adtStatu === item3) {
              console.log(item2)
            }
          })
        })
        // console.log(item.attendanceRecord)
        // console.log(item.adtStatu)
      })
    },

    // 获取枚举数组里的单选项
    getradios() {
      attendanceEnum.holidayType.forEach(item => {
        this.radios.push(item.value)
      })
    },
    getenumerateFn() {
      // console.log(this.filteredList)
      console.log(attendanceEnum.holidayType)
      this.radiolist.forEach(item => {
        // attendanceEnum.holidayType.find(item => Number(item.id) === Number(oldval))
        attendanceEnum.holidayType.forEach(item2 => {
          if (item === item2.value) {
            if (!this.getenumerate.includes(item2.id)) {
              const num = +item2.id
              this.getenumerate.push(num)
            }
          }
        })
      })
      console.log(this.getenumerate) // 拿到了考勤状态的枚举数字
    }
  }
}
</script>

<style>

</style>
